<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				添加好友
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="search">
			<view class="flexBox">
				<image src="../../../static/jingjie/search.png" mode=""></image>
				<input type="text" value="" placeholder="用户名/手机号" v-model="userNickName" @input="selecyUser" />
			</view>
			<view class="state1" @tap="selecyUser">搜索</view>
		</view>
		<view class="body" v-if="isDisplay">
			<view class="body_item" @tap="toSaomiao">
				<image src="../../../static/jingyou/saoyisao.png" mode="" class="body_item_left"></image>
				<view class="body_right">
					<view class="body_item_mid">
						扫一扫
						<text>扫描二维码名片</text>
					</view>
					<image class="body_item_right" src="../../../static/jingjie/right_arrow.png" mode=""></image>
				</view>

			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="body_item" @tap="toTongxunlu">
				<image src="../../../static/jingyou/lianxiren.png" mode="" class="body_item_left"></image>
				<view class="body_right">
					<view class="body_item_mid">
						手机联系人
						<text>添加通讯录中的朋友</text>
					</view>
					<image class="body_item_right" src="../../../static/jingjie/right_arrow.png"></image>
				</view>

			</view>
			<!-- #endif -->

		</view>
		<view v-else>
			<view class="body_active" v-for="(item,index) in allUserList" :key='index'>
				<view class="body_active_item">
					<view class="body_active_left">
						<image class="headImg" :src="item.avatar"></image>
						<image class="country" src="../../../static/meiguo.png"></image>
					</view>
					<view class="body_active_mid">
						<text class="nickname" v-text="item.nick_name"></text>
						<text class="sayHellow" v-text="item.intro"></text>
					</view>
					<view class="body_active_right" @tap="applyAddFriend(item.user_id)">
						<view class="time" v-text="item.create_time"></view>
						<view class="state1">添加</view>
					</view>
					<view class="bottomborder">

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userNickName: '',
				page: 1,
				isDisplay: true,
				allUserList: [], //所有用户列表
			};
		},
		onShow() {
			this.userNickName = ''
		},
		methods: {
			toTongxunlu() {
				uni.navigateTo({
					url: "../tongxunlu/tongxunlu"
				})
			},
			toSaomiao() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			selecyUser() { //根据条件查询用户
				if (this.userNickName != '') {
					this.isDisplay = false
					var data = {
						// nick_name: this.userNickName,
						currentPage: this.page
					}
					if (this.userNickName != '') {
						data.queryString = this.userNickName
					}
					var me = this;
					this.myAjaxNew({
						model: 'user',
						controllerName: 'userInfo',
						actionName: 'querySearch',
						data: data,
						successBack: function(res) {
							console.log(res);
							if (res.data.data.length) {
								for (var i = 0; i < res.data.data.length; i++) {
									var arr = res.data.data[i].create_time.split('T')
									res.data.data[i].create_time = arr[0]
								}
							} else {
								uni.showToast({
									title: '未找到符合条件的用户',
									icon: 'none'
								})
							}
							me.allUserList = res.data.data
						},
					})
				}else{
					uni.showToast({
						title:'请输入要搜索的昵称或手机号',
						icon:'none'
					})
				}

			},
			//申请加好友
			applyAddFriend(item) {
				var loginInfo = uni.getStorageSync('loginInfo')
				var a = item + ''
				var b = loginInfo.identifier + ""
				uni.navigateTo({
					url: '/pages/Friend/applyFor/applyFor?item=' + a + '&identifier=' + b + '&type=friend'
				})
			}


		},
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 162upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;
		padding-top: 70upx;
	}

	.head_mid {
		padding-top: 90upx;
	}

	.head_right {
		width: 106upx;
	}

	.search {
		margin-top: 20upx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		padding: 0 24upx;
		box-sizing: border-box;
		width: 100%;
		font-size: 32upx;
	}

	.search image {
		width: 32upx;
		height: 32upx;
		padding-left: 24upx;
		margin-right: 10upx;
	}

	.body {
		margin-top: 20upx;
		background: #FFFFFF;
	}

	.body_item {
		display: flex;
		align-items: center;
		padding: 28upx 24upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.body_item_left {
		width: 56upx;
		height: 56upx;
		margin-right: 34upx;

	}

	.body_item_right {
		width: 18upx;
		height: 32upx;

	}

	.body_item_mid {
		display: flex;
		flex-direction: column;
		color: #333333;
		font-size: 32upx;
	}

	.body_item_mid text {
		font-size: 24upx;
		color: #999999;
		padding-top: 14upx;
	}

	.body_right {
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
	}

	.body_active {
		margin-top: 20upx;
	}

	.body_active_item {
		background: #FFFFFF;
		padding: 24upx 24upx;
		display: flex;
		position: relative;
	}

	.body_active_left {
		position: relative;
	}

	.headImg {
		width: 106upx;
		height: 106upx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 28upx;
	}

	.country {
		height: 36upx;
		width: 36upx;
		position: absolute;
		left: 0upx;
		bottom: 0upx;
	}

	.body_active_mid {
		display: flex;
		flex-direction: column;
		margin-left: 15upx;
	}

	.body_active_mid text {
		max-width: 415upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.nickname {
		color: #333333;
		font-size: 32upx;
		margin-bottom: 25upx;
	}

	.sayHellow {
		color: #666666;
		font-size: 26upx;
	}

	.body_active_right {
		position: absolute;
		right: 24upx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.time {
		color: #CCCCCC;
		font-size: 24upx;
		margin-bottom: 18upx;
		display: flex;
		flex-direction: row-reverse;
	}

	.flexBox {
		display: flex;
		align-items: center;
	}

	.state1 {
		width: 100upx;
		height: 58upx;
		background: #46CECF;
		color: #FFFFFF;
		line-height: 58upx;
		text-align: center;
		font-size: 26upx;
		border-radius: 10upx;
	}

	.state2 {
		font-size: 26upx;
		color: #999999;
	}

	.bottomborder {
		position: absolute;
		width: 600upx;
		border-bottom: 1upx solid #E6E6E6;
		bottom: 1upx;
		right: 0;
	}
</style>
